<template>
  <div class="mylist">
    <my-heard />
    <div>
      <div class="rec_right">
        <swiper class="swiper" :options="swiperOption">
          <swiper-slide>
            <div>
              <a href="">
                <div>
                  <img
                    class="city_photo"
                    src="/detail_f2_img/img1/luodanmeishuguan.jpg"
                    alt=""
                  />
                  <button>
                    <i class="iconfont">&#xe603;</i>
                  </button>
                </div>
                <div>罗丹美术馆</div>
                <div>
                  <div>
                    <el-rate
                      v-model="value"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}"
                    >
                    </el-rate>
                  </div>
                  <span>12573</span>
                </div>
                <div>特色博物馆</div>
              </a>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div>
              <a href="">
                <div>
                  <img
                    class="city_photo"
                    src="/detail_f2_img/img1/aosaibowuguan.jpg"
                  />
                  <button>
                    <i class="iconfont">&#xe603;</i>
                  </button>
                </div>
                <div>罗丹美术馆</div>
                <div>
                  <div>
                    <el-rate
                      v-model="value"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}"
                    >
                    </el-rate>
                  </div>
                  <span>12573</span>
                </div>
                <div>特色博物馆</div>
              </a>
            </div></swiper-slide
          >
          <swiper-slide>
            <div>
              <a href="">
                <div>
                  <img
                    class="city_photo"
                    src=" /detail_f2_img/img1/aifeiertieta.jpg"
                    alt=""
                  />
                  <button>
                    <i class="iconfont">&#xe603;</i>
                  </button>
                </div>
                <div>罗丹美术馆</div>
                <div>
                  <div>
                    <el-rate
                      v-model="value"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}"
                    >
                    </el-rate>
                  </div>
                  <span>12573</span>
                </div>
                <div>特色博物馆</div>
              </a>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div>
              <a href="">
                <div>
                  <img
                    class="city_photo"
                    src="/detail_f2_img/img1/balishengmuyuan.jpg"
                    alt=""
                  />
                  <button>
                    <i class="iconfont">&#xe603;</i>
                  </button>
                </div>
                <div>罗丹美术馆</div>
                <div>
                  <div>
                    <el-rate
                      v-model="value"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}"
                    >
                    </el-rate>
                  </div>
                  <span>12573</span>
                </div>
                <div>特色博物馆</div>
              </a>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div>
              <a href="">
                <div>
                  <img
                    class="city_photo"
                    src="/detail_f2_img/img1/kaixuanmen.jpg"
                    alt=""
                  />
                  <button>
                    <i class="iconfont">&#xe603;</i>
                  </button>
                </div>
                <div>罗丹美术馆</div>
                <div>
                  <div>
                    <el-rate
                      v-model="value"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}"
                    >
                    </el-rate>
                  </div>
                  <span>12573</span>
                </div>
                <div>特色博物馆</div>
              </a>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div>
              <a href="">
                <div>
                  <img
                    class="city_photo"
                    src="/detail_f2_img/img1/lufugong.jpg"
                    alt=""
                  />
                  <button>
                    <i class="iconfont">&#xe603;</i>
                  </button>
                </div>
                <div>罗丹美术馆</div>
                <div>
                  <div>
                    <el-rate
                      v-model="value"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}"
                    >
                    </el-rate>
                  </div>
                  <span>12573</span>
                </div>
                <div>特色博物馆</div>
              </a>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div>
              <a href="">
                <div>
                  <img
                    class="city_photo"
                    src="/detail_f2_img/img1/shengweientiaozaoshichang.jpg"
                    alt=""
                  />
                  <button>
                    <i class="iconfont">&#xe603;</i>
                  </button>
                </div>
                <div>罗丹美术馆</div>
                <div>
                  <div>
                    <el-rate
                      v-model="value"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}"
                    >
                    </el-rate>
                  </div>
                  <span>12573</span>
                </div>
                <div>特色博物馆</div>
              </a>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div>
              <a href="">
                <div>
                  <img
                    class="city_photo"
                    src="/detail_f2_img/img1/shengxintang.jpg"
                    alt=""
                  />
                  <button>
                    <i class="iconfont">&#xe603;</i>
                  </button>
                </div>
                <div>罗丹美术馆</div>
                <div>
                  <el-rate
                    v-model="value"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}"
                  >
                  </el-rate>

                  <span>12573</span>
                </div>
                <div>特色博物馆</div>
              </a>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div>
              <a href="">
                <div>
                  <img
                    class="city_photo"
                    src="/detail_f2_img/img1/dulelihuayuan.jpg"
                    alt=""
                  />
                  <button>
                    <i class="iconfont">&#xe603;</i>
                  </button>
                </div>
                <div>罗丹美术馆</div>
                <div>
                  <div>
                    <el-rate
                      v-model="value"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}"
                    >
                    </el-rate>
                  </div>
                  <span>12573</span>
                </div>
                <div>特色博物馆</div>
              </a>
            </div>
          </swiper-slide>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </div>
    </div>
    <my-foot />
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.rec_right {
  width: 900px;
  a {
    text-decoration: none;
    color: #000;

    div:nth-child(1) {
      display: flex;
      position: relative;

      button {
        position: absolute;
        right: -4px;
        top: 8px;
        width: 45px;
        height: 45px;
        border: none;
        border-radius: 50%;
      }
    }
    div:nth-child(2) {
      font-size: 20px;
    }
    div:nth-child(4) {
      color: #333333;
    }
    .city_photo {
      width: 300px;
      height: 220px;
      margin-right: 5px;
    }
  }
}
</style>
